import Taro, { Component } from '@tarojs/taro'
import { View, Button, Image, Input, Picker } from '@tarojs/components'
import { post } from '../../service/api'
import { AtActivityIndicator } from 'taro-ui'
import './index.scss'

class Company extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      selector: ['小区', '公司', '方案'],
      selectorChecked: '小区',
      name: "",
      list: [],
      index: 0,
      pageNo: 1,
      loading: false,
      total: 0
    }
  }
  config = {
    navigationBarTitleText: '搜索',
  }

  async search() {
    const { name, index, pageNo, list } = this.state, string = ['quarters/findPageList', 'company/findPageList', 'anli/findPageList'];
    if (index == 2) {
      const { data } = await post(string[index], {
        title: name,
        pageNo
      })
      if (data.code == 0) {
        this.setState({
          list: list.concat(data.rows),
          total: data.total,
          loading: true
        }, () => {
          if (data.rows.length >= data.total) {
            this.setState({
              loading: false
            })
          }
        })
      }
    } else {
      const { data } = await post(string[index], {
        seachName: name,
        pageNo,
      })
      if (data.code == 0) {
        this.setState({
          list: list.concat(data.rows),
          total: data.total,
          loading: true
        }, () => {
          if (data.rows.length >= data.total) {
            this.setState({
              loading: false
            })
          }
        })
      }
    }
  }
  onScrollToLower() {
    let { list, pageNo, total } = this.state;
    if (list.length < total) {
      pageNo += 1;
      this.setState({
        pageNo,
      })
      this.search()
    } else {
      this.setState({
        loading: false
      })
    }
  }
  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
      index: e.detail.value,
      pageNo: 1,
      list: []
    }, () => {
      this.search();
    })

  }
  inputValue(e) {
    this.setState({
      name: e.detail.value
    })
  }
  btnSearch() {
    this.setState({
      pageNo: 1,
      list: []
    }, () => {
      this.search()
    })
  }
  toPageDesign(_id) {
    Taro.navigateTo({ url: `/pages/design/index?lpId=${_id}` })
  }
  toPageCompanyDetail(id) {
    Taro.navigateTo({ url: `/pages/companyDetail/index?id=${id}` })
  }
  componentDidMount() {

  }
  render() {
    const { list, index, loading, total } = this.state;
    return (
      <View className='h-search'>
        <View className="search-box">
          <View className="search-left">
            <View className="select">
              <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                {this.state.selectorChecked}
              </Picker>
              <Image className="img" src={require('../../asset/imgs/Path2.png')} />
            </View>
            <Input className="input" onChange={this.inputValue.bind(this)} placeholder="搜索小区名称" />
          </View>
          <Button className="search-btn" onClick={this.btnSearch.bind(this)}>搜索</Button>
        </View>
        <ScrollView className={total ? "list list-bg" : "list"} scrollY scrollWithAnimation lowerThreshold='10'
          onScrollToLower={this.onScrollToLower.bind(this)}>
          {index == 0 && list.map(item => {
            return (
              <View className="item" key={item.id} onClick={this.toPageDesign.bind(this, item._id)}>
                <View className="item-name">{item.lpName}</View>
                <View className="item-address">{item.lpAddress}</View>
              </View>
            )
          })}
          {index == 1 && list.map(item => {
            return (
              <View className="item" key={item.id} onClick={this.toPageCompanyDetail.bind(this, item.id)}>
                <View className="item-name">{item.name}</View>
                <View className="item-address">{item.address ? item.address : ""}</View>
              </View>
            )
          })}
          {index == 2 && list.map(item => {
            return (
              <View className="item" key={item.companyId}>
                <View className="item-name">{item.title}</View>
                <View className="item-address">{item.companyName}</View>
              </View>
            )
          })}
          {
            loading && <View className="loading">
              <AtActivityIndicator mode='normal' color="#FFAE34" content='加载中...'></AtActivityIndicator>
            </View>
          }{
            !total && <View className="none-box">
              <Image className="img" src={require('../../asset/imgs/none.png')} />
              <View className="hint">暂时没有相应信息</View>
            </View>
          }
        </ScrollView>
      </View>
    )
  }
}

export default Company
